Using BBcode -- Tips and Tricks [Outdated]

[Zarkis]

** The following thread is outdated and may contain information that is not true due to changes to the Gaia Online Forums. While a lot of the codes remain use-able, some of them have changed, and this thread will no longer be updated. Last update: Fall 2008 **

---------------
In this thread, you will learn:

- Meaning of BBcode
- Using BBcode
- Advanced techniques and hidden BBcode codes
- Thread creating tips
---------------


Lets begin.

You might of heard the term "BBcode" and you might recognize the tags [b] and [/b], but do you know that these two objects are linked?
BBcode- short for Bulletin Board Code- is coding that allows users of message boards, like Gaia, to format their posts. You will
be able to use this coding to make things stand out, and create eye-appealing threads or even PMs, Journal entries, signature, or
your about section in your profile.

** BBCode is only FORUM coding. It CANNOT change anything like a web page or YOUR GAIA PROFILE.

[Zarkis]

BBCode is made of two main things. You have the tag, and then you have the
text.

A tag is a command that the forum recognizes, and it changes depending
on what you make the tag. For example, the code

[b]

is a tag. It will bold your text. However, if you just just one tag, you'll get
something that will look like this:

[b] My text is bolded!

The message board, or forum, doesn't know when you want to stop
bolding, so it gives an error. In this case, the tag does nothing. Therefor,
you must end ALL beginning tags with a closing tag. A proper code to bold
your text would look like this:

[b] My text is bolded! [/b]

However, when you type the [b] and the [/b] in a text box and
click submit, the forum hides the tags, and shows you this:

My text is bolded!

There are many tags you can use to make your text stand out. This guide
will show you almost all the ones you can use on Gaia. Remember, not all
forums will allow use to use the same tags as Gaia does.




ORDERING

Ordering is something that you DON'T need to do, but in most cases it is
easier to work with and the outcome might be better. This is an example
of someone who is coloring, bolding, and underlining their text.

My Text Is Different!

This person has used the following coding to apply these changes:

[color=red][b][u] My Text Is Different! [/color][/u][/b]

We see here that he starts with a color tag, then a bold tag, and then an
underline tag. His text has come out okay, but the correct and legitament
way to code would look like this:

[color=red][b][u] My Text Is Different! [/u][/b][/color]

Here, you can see that he has closed the tags in order. The underline tag
was last, so we will close it first. The bold tag was second, so it is second
to be closed. And lastly, the color tag is closed.

You might not see a reason to code like this, but once you start getting into
BBCode, and using a bunch of it, coding like this is an advantage and a help.

[Zarkis]

If you've ever used a program like Microsoft Word before, you have
probably either bolded, italicized, or aligned your text. On the
GaiaOnline forums, you can do the same thing, but a bit differently.


If you have ever posted before, you should recognize the buttons
above the text box when submitting a post. Currently (June 07),
it looks somewhat like this:





With a simple click of these buttons, you can add BBCode to your
text.

For example, when you high light some text and click a button or
a drop down list selection, the tags are then automatically added.
Remember, if you want to play around with these buttons, you can
always use them in the test forum to see what you get.


Here are some of the Basic BBCodes out there.



Bold Text

Example: Text text TEXT
Code: [b] Text here [/b]

Italicize Text

Example: Text text TEXT
Code: [i] Text here [/i]

Underline Text

Example: Text text TEXT
Code: [u] Text here [/u]

Strike Through

Example: Text text TEXT
Code: [strike] Text here [/strike]

Quote Text

Example:

Quote:

Text text TEXT

Code: [quote] Text here [/quote]



Font Colors

Example: Text text TEXT
Code: [color=COLORHERE] Text here [/color]

Align Font Left/Center/Right

Example:
Text text TEXT

Example:
Text text TEXT

Example:
Text text TEXT

Code: [align=LEFT/CENTER/RIGHT] Text here [/align]

Code Font

Example:
You can type tags here, and they show [u] whee [/u]

Code: [code] Text here [/code]


Font Size

Example:

Text text TEXT
Code: [size=NUMBER 0-24 HERE] Text here [/size]

[Zarkis]

Okay, so you understand the basics, and how BBCode works. But how do
we post links, color out fonts special colors, and other tricks? Well, even
though the buttons might not be shown, there are many more tags we can
use to enhance our posts.


Posting a text URL

Example: Text text TEXT
Code: [url=ADDRESS HERE] Text and tags here [/url]

Posting an Image

Example:
Code: [img]IMAGE URL HERE[/img]

Aligning an Image

Example:
Code: [imgleft]IMAGE URL HERE[/imgleft]
Example:
Code: [imgright]IMAGE URL HERE[/imgright]
Example:


Code: [align=center][img]IMAGE URL HERE[/img][/align]

Quotes With A Title

Example:

TITLE LALALALA

Text text TEXT

Code: [quote="TITLE OF QUOTE HERE"] Text and tags here [/quote]



More Font Colors

Example: Text text TEXT
Code: [color=#HEXCODE HERE] Text and tags here [/color]

[Zarkis]

Now that we have learned almost all the tags that we can use on Gaia's
forums, lets learn how to use special codes to do things you might have
always wanted to know how to do.


LISTS

Lists are used to indent text and pictures for a more organized look.
Gaia offers several different types of lists, so you have your choices.

Example:

Things to Do

• Finish Thread
  
• Make Graphics
  
• My Shop

Code:

[list]
[*] Bullet One
[*] Bullet Two
[*] Bullet Three[/list]


As you can see, each [*] makes a bullet point. We can add a different
tag to make the bullet become letters or numbers. For letters, you will use
this: [list=a] and for numbers, you will use this: [list=1].
Additionally, we can add a list inside a list. For example:

• Finish Thread
  
  1. Intermediate Codes
     
  2. FAQ's
     
  3. MISC

Code:


[list=a][*] Finish Thread
[list=1][*] Intermediate Codes
[*] FAQ's
[*] MISC [/list][/list]

Notice, that since we have two lists, we close our tag by adding two close
list tags ([/list]). Experimenting with lists can do you some good.







CODING

Throughout this guide you have seen me post tags without using the
[code] tag, and they show up as a tag. How do I do this? Well,
there is a simple explanation. Let me show you how to do this, using
an organized list.

Step 1

• Type out your codes/coding
  
  

Step 2

• Add a [i][/i] after each [, and before each /
  
  

Step 3

• Preview, and submit.

Example:

I am posting a [b] tag without doing the [/code] tag!

Code:

I am posting a [[i][/i]b] tag without doing the [[i][/i]/code] tag!

This can get tricky, so it might take a while to perfect, but it is nice to be
able to show codes without having to post a bulky box, like what the
coding tag does.






CHANGING UNDERLINE'S COLOR

You might have seen people posting with green text, and a gray underline.
Cool, huh? Well, here's how it's done:

Example: TEXT text Text

Coding:

[color=#FF00CC][u][b][/color][color=#666666] TEXT AND TAGS HERE [/color][/u][/b]

The first color tag names the color of the underline, and the second names the color of the following text. However, you might notice that if you try to
underline or bold your text when using this, the coding might screw up.








CHANGING QUOTE TITLES

When using the quote tag, one may notice the title of the tags
(username Wrote smile stays that one color that seems to never match. With
this trick, we can also apply basic tags.
Well, there is a way to change this.

Example:

[color=red]Look, I'm red!

Look! I'm red too! We match

Code: [quote="[color=red]TITLE HERE[/color]"] QUOTE TEXT HERE [/quote]

As you can see, the "Wrote:" part cannot change color. However, the title
color change can be a nice addition to any quote box.

[Zarkis]

When making a thread, it's best to try to get appeal. When users see
something they like, they have a higher rate to post in that thread than if
the introduction posts didn't look all that great. Here are a few tips on how
to make your thread appealing, but to keep it from going insane.

• Don't over do it.
  Many threads makers like to use random font colors, odd sizes, and post
  images all over the place. Stick to a theme of about three colors or less.
  When you're posting images, try not to make things look un-organized.
  
  
• Watch your alignment
  A lot of users like to select all -> align -> Center. This is not bad, but
  sometimes it looks odd. When centering, usually users like it better if its a
  single image, like a banner, instead of the whole thread. Text is easier to
  read if it is aligned to the left or right.
  
  
• Continue a theme
  If in the first post you have bolded underlined size 14 headers, you should
  have bolded underlined size 14 headers in all. It is not appealing to have to
  re-adjust to a new post style every single post, and can be confusing to a
  person browsing.
  
  
• Watch your text format
  When you are posting a lot of information in one area or paragraph, some
  times its better to make that block look smaller than it actually is. To tell
  you the truth, people don't want to read a thread that looks huge when it
  comes to words. Using font sizes 9 through 11 can help make a lot look like
  a little.

I hope this helps you when you create any thread, whether it be a shop,
quest, a guide, or even just a topic in the Chatterbox.

If you have any question or comments, please post them in the thread.
Thanks!

[Zarkis]

reserved

[-x-Ad Astra-x-]

You can delete my post if I posted too soon, but I have a specific question.

Right now I have a classic block profile but I want to customize it. Is there anyway I can make one image the background or the main focus of my profile??

[Zarkis]

• I'm sorry, you're confused.
  
  The type of coding that profiles on Gaia use, is called CSS.
  BBCode is just for posting and the sort. I'm sorry if the intro confused you,
  I need to specify that.
  
  However, I can help you out in this area.
  
  Add this code to your profile, but this is all I am going to say. Please go to
  a CSS tutorial and ask there for more information.
  
  body {background: #fff url(URL OF IMAGE HERE} top left no repeat;}
  
  #content {background: transparent;}
  
  

. . . . . .

[-x-Ad Astra-x-]

Okay, thanks. That makes more sense (again fill free to delete post).

[Zarkis]

• Alright~
  
  I'm done for now. If you have any questions don't be shy of asking 3nodding
  
  

. . . . . .

[`Mods]

Get FireFox ~ It Is Groovy




• I give it a thumb ups!
  + Subscribed
  
  
  
  
  
  
  
  
  Get GaiArch While Your At It ~ Cuz` It is Super Cool! :0

[Fox of Blood]

Very interesting. There were some things I didn't know (just 2 things, but it helped me XD)
Subscribed + Thumbs Up
EDIT :: Some spelling errors and the text was to big .-.
PS. Mods took the fifth post T*T

[Zarkis]

• Thanks for the props~
  I hope to add more as I stumble upon tricks.
  
  

. . . . . .

[Zarkis]

• Editing basics~
  
  

. . . . . .